<template>
    <div class="wrap">
        <div class="content">
            <div class="pic-wrap">
                <div class="pic" :style="{ backgroundImage: `url(${userPic})` }">
                    <div>
                        <el-icon size="12px" color="#999"><EditPen /></el-icon>
                    </div>
                    <input type="file" @change="changimg" />
                </div>
            </div>
            <div class="msg-wrap">
                <div class="name">
                    {{ userName }}
                    <el-icon size="12px" color="#999" @click="changeName = true"><EditPen /></el-icon>
                    <div v-show="changeName" class="changeIpt">
                        <input type="text" v-model="nameInp" />
                    </div>
                    <div v-show="changeName" class="btns">
                        <div
                            @click="
                                changeName = false;
                                nameInp = '';
                            "
                        >
                            取消
                        </div>
                        <div @click="setUserMsg('passname')">确定</div>
                    </div>
                </div>
                <div class="phone">
                    号码:{{ userAccount }}
                    <el-icon size="12px" color="#999" @click="changeAccount = true"><EditPen /></el-icon>
                    <div v-show="changeAccount" class="changeIpt">
                        <input type="text" v-model="accInp" />
                    </div>
                    <div v-show="changeAccount" class="btns">
                        <div
                            @click="
                                changeAccount = false;
                                accInp = '';
                            "
                        >
                            取消
                        </div>
                        <div @click="setUserMsg('account')">确定</div>
                    </div>
                </div>
                <div class="btn" v-if="!isShow" @click="isShow = true">修改密码?</div>
                <div v-else class="change-wrap">
                    <p class="t">旧密码</p>
                    <p>
                        <input type="text" name="" id="" v-model="oldWord" />
                    </p>
                    <p class="t">新密码</p>
                    <p>
                        <input type="text" name="" id="" v-model="newWord" />
                    </p>
                    <div class="btns">
                        <div class="cancel" @click="isShow = false">取消</div>
                        <div class="define" @click="changeWord">确定</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import axios from "axios";
import { ref } from "vue";
import { useStore } from "vuex";
import { uploadsApi, setPic, getUserData, setUser, setWord } from "../api/index";
import { onMounted } from "vue";
import { EditPen } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
let store = useStore();
let userAccount = ref("");
let userPic = ref("");
let userName = ref("");
let isShow = ref(false);
let changeName = ref(false);
let changeAccount = ref(false);
let nameInp = ref("");
let accInp = ref("");
let oldWord = ref("");
let newWord = ref("");
let router = useRouter();
// 从cookie获取用户账号并请求用户所有信息
onMounted(() => {
    let getUser = async () => {
        if (document.cookie) {
            let arr = document.cookie.split("; ");
            let obj = {};
            arr.forEach((item) => {
                let keyName = item.split("=")[0];
                let keyVal = item.split("=")[1];
                obj[keyName] = keyVal;
            });
            if (obj.userAccount) {
                await axios(getUserData(obj.userAccount)).then(({ data }) => {
                    store.commit("setUserData", data[0]);
                    console.log(store.state.userData);
                    userName.value = store.state.userData.passname;
                    userAccount.value = store.state.userData.account;
                    userPic.value = "http://127.0.0.1:3000/imgs/" + store.state.userData.user_pic;
                });
            } else {
                router.push({ name: "loginRegistration" });
                ElMessage.error("请先登录");
            }
        } else {
            router.push({ name: "loginRegistration" });
            ElMessage.error("请先登录");
        }
    };
    getUser();
});

let changimg = (event) => {
    let fileInfo = event.target.files[0];
    if (fileInfo.type.split("/")[0] == "image") {
        let suffix = fileInfo.name.split(".")[1];
        if (suffix == "jpg" || suffix == "png" || suffix == "gif" || suffix == "jpeg") {
            let formData = new FormData();
            formData.append("file", fileInfo);
            axios
                .post(uploadsApi(), formData, {
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                })
                .then(({ data }) => {
                    axios
                        .post(setPic(), {
                            pic: data.src,
                            account: userAccount.value,
                            type: "b",
                        })
                        .then(({ data }) => {
                            ElMessage({
                                message: data.m,
                                type: "success",
                            });
                        });
                });

            let fli = new FileReader();
            fli.readAsDataURL(event.target.files[0]);
            fli.onload = function () {
                userPic.value = this.result;
            };
            setTimeout(() => {
                location.reload(true);
            }, 500);
        } else {
            ElMessage.error("暂不支持该格式的文件");
            ElMessage.error("请上传jpg,png,gif,jpeg格式的图片");
        }
    } else {
        ElMessage.error("选择的文件不是图片");
    }
};

let setUserMsg = (str, psw = 0) => {
    let newPrice;
    if (str == "passname") {
        newPrice = nameInp.value;
    } else if (str == "account") {
        newPrice = accInp.value;
    }

    if (!psw) {
        axios
            .post(setUser(), {
                type: str,
                newPrice,
                account: userAccount.value,
            })
            .then(({ data }) => {
                if (data.s == 200) {
                    ElMessage({
                        message: data.m,
                        type: "success",
                    });
                    if (str == "account") {
                        let times = new Date().setTime(new Date().getTime() + 7 * 24 * 60 * 60 * 1000);
                        document.cookie = `userAccount=${newPrice};expires=` + times;
                    }
                    setTimeout(() => {
                        location.reload(true);
                    }, 500);
                } else {
                    ElMessage.error(data.m);
                }
            });
    }
};

let changeWord = () => {
    axios
        .post(setWord(), {
            account: userAccount.value,
            oldWord: oldWord.value,
            newWord: newWord.value,
            type: "b",
        })
        .then(({ data }) => {
            if (data.s == 200) {
                ElMessage({
                    message: data.m,
                    type: "success",
                });
                ElMessage.error("用户信息过期,请重新登录");
                router.push({ name: "loginRegistration" });
                document.cookie = "autoL=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
                document.cookie = "rem=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
                document.cookie = "userAccount=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
            } else {
                ElMessage.error(data.m);
            }
        });
};
</script>

<style lang="scss" scoped>
.wrap {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    .content {
        width: 100%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 0 3px rgba($color: #000000, $alpha: 0.3);
        .pic-wrap {
            width: 200px;
            margin: 0 auto;
        }
        .pic {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background-position: center !important;
            background-size: cover !important;
            border-radius: 50%;
            position: relative;
            input {
                width: 100%;
                height: 20%;
                position: absolute;
                bottom: 0;
                left: 0;
                opacity: 0;
            }
            & > div {
                display: none;
                font-size: 0.75rem;
                text-align: center;
                position: absolute;
                width: 100%;
                height: 20%;
                bottom: 0;
                left: 0;
                background-color: rgba($color: #fff, $alpha: 0.8);
            }
            &:hover div {
                display: block;
            }
        }
        .msg-wrap {
            width: 200px;
            margin: 0 auto;
            text-align: center;
            .name,
            .phone {
                margin-top: 20px;
                position: relative;
                width: 200px;
                height: 30px;
                line-height: 30px;
                .changeIpt {
                    width: 100%;
                    position: absolute;
                    text-align: center;
                    top: 0;
                    left: 0;
                    input {
                        border: 1px solid #ccc;
                        outline: none;
                    }
                }
                .btns {
                    width: 100%;
                    padding: 0 10px;
                    box-sizing: border-box;
                    position: absolute;
                    display: flex;
                    justify-content: space-around;
                    div {
                        width: 40px;
                        height: 20px;
                        font-size: 12px;
                        line-height: 20px;
                        background-color: #8076a3;
                        color: #fff;
                        border-radius: 5px;
                    }
                }
            }
            .btn {
                margin: 30px auto 0;
                width: 80px;
                height: 30px;
                line-height: 30px;
                background-color: #8076a3;
                border-radius: 5px;
            }
            .change-wrap {
                .t {
                    text-align: left;
                    padding: 0 15px 5px;
                    margin-top: 10px;
                }
                input {
                    border: 1px solid #ccc;
                    outline: none;
                }
                .btns {
                    margin-top: 10px;
                    display: flex;
                    padding: 0 10px;
                    justify-content: space-around;
                    div {
                        width: 40px;
                        height: 25px;
                        line-height: 25px;
                        border-radius: 5px;
                        font-size: 12px;
                        background-color: #8076a3;
                    }
                }
            }
        }
    }
}
</style>
